<template>
  <el-row>
    <el-alert>
      <el-button type="danger" @click="showAddDialog">新增</el-button>
    </el-alert>
    <el-form :model="searchForm" inline>
      <el-form-item>
        <el-select v-model="searchForm.order">
          <el-option value="1" label="一院"></el-option>
          <el-option value="2" label="二院"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable></el-input>
      </el-form-item>
      <el-form-item prop="id_card">
        <el-input v-model="searchForm.id_card" minlength="18" maxlength="18" placeholder="请输入身份证号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.start_time"
          type="date"
          placeholder="选择开始时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.end_time"
          type="date"
          placeholder="选择结束时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查找</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success">导出</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-card>
    <el-table :data="recordsList" stripe>
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="created_at" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="id_card" label="身份证号码"></el-table-column>
      <el-table-column prop="group_name" label="团队名称"></el-table-column>
      <el-table-column prop="operation_name" label="项目名称"></el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-button type="primary" @click="showEditDialog(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="myPagination">
      <el-pagination
        background
        :current-page="queryInfo.page"
        :page-size="queryInfo.size"
        layout="prev, pager, next, total"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

  <el-dialog
    v-model="addDialogVisible"
    title="新增记录"
    width="50%"
    @close="handleAddFormClose"
  >
    <el-form
      :model="addForm"
      ref="addFormRef"
      :rules="formRules"
      label-width="100px"
      label-position="right"
    >
      <el-form-item prop="name" label="姓名: ">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item prop="id_card" label="身份证号码: ">
        <el-input v-model="addForm.id_card" type="number" minlength="18" maxlength="18" min="1"></el-input>
      </el-form-item>
      <el-form-item prop="group_name" label="团队名称: ">
        <el-input v-model="addForm.group_name"></el-input>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog
    v-model="editDialogVisible"
    title="修改记录"
    width="50%"
    @close="handleEditFormClose"
  >
    <el-form
      :model="editForm"
      ref="editFormRef"
      :rules="formRules"
      label-width="100px"
      label-position="right"
    >
      <el-form-item prop="name" label="姓名: ">
        <el-input v-model="editForm.name"></el-input>
      </el-form-item>
      <el-form-item prop="id_card" label="身份证号码: ">
        <el-input v-model="editForm.id_card" type="number" minlength="18" maxlength="18" min="1"></el-input>
      </el-form-item>
      <el-form-item prop="group_name" label="团队名称: ">
        <el-input v-model="editForm.group_name"></el-input>
      </el-form-item>
      <el-form-item prop="operation_name" label="项目名称: ">
        <el-input v-model="editForm.operation_name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEdit">编辑</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import useCurrentInstance from '@/hooks/useCurrentInstance'
import type { ElForm } from 'element-plus'
import { ElMessage } from 'element-plus'
const { globalProperties: proxy } = useCurrentInstance()
const searchForm = reactive({
  order: '1',
  name: '',
  id_card: '',
  start_time: '',
  end_time: ''
})
const queryInfo = reactive({
  order: '1',
  name: '',
  id_card: '',
  page: 1,
  size: 10
})
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const total = ref(0)
const recordsList = ref([])
const editForm = reactive({})
const getRecords = async () => {
  const { data } = await proxy.$http.post(
    'records/index', { ...queryInfo }
  )
  recordsList.value = data.data.data
  total.value = data.data.total
}
getRecords()
const handleSearch = () => {
  queryInfo.order = searchForm.order
  queryInfo.name = searchForm.name
  queryInfo.id_card = searchForm.id_card
  queryInfo.page = 1
  getRecords()
}
const handleCurrentChange = (newPage: number) => {
  queryInfo.page = newPage
  getRecords()
}
const showAddDialog = () => {
  addDialogVisible.value = true
}
const showEditDialog = (row: { id: number }) => {
  editDialogVisible.value = true
  getEditForm(row.id)
}
const getEditForm = async (id: number) => {
  const { data } = await proxy.$http.get(`records/show/${id}`)
  Object.assign(editForm, data.data)
}
const handleEdit = async () => {
  if (!editFormRef.value) {
    return
  }
  editFormRef.value?.validate(async valid => {
    if (!valid) {
      return false
    }
    const res = await proxy.$http.put('records/update', editForm)
    if (res.data.code !== 200) {
      return ElMessage.error('修改失败! ')
    }
    ElMessage.success('修改成功! ')
    editDialogVisible.value = false
    await getRecords()
  })
}
type FormInstance = InstanceType<typeof ElForm>
const addForm = reactive({
  name: '',
  group_name: ''
})
const addFormRef = ref<FormInstance>()
const editFormRef = ref<FormInstance>()
const formRules = reactive({
  name: [
    {
      required: true,
      message: '',
      blur: 'trigger'
    }
  ],
  group_name: [
    {
      required: true,
      message: '',
      blur: 'trigger'
    }
  ],
  id_card: [
    {
      required: true,
      message: '身份证号码不能为空',
      blur: 'trigger'
    },
    {
      min: 18,
      max: 18,
      message: '身份证号码长度必须是18位',
      blur: 'trigger'
    }
  ]
})
const handleAddFormClose = () => {
  addFormRef.value?.clearValidate()
  addFormRef.value?.resetFields()
}
const handleEditFormClose = () => {
  editFormRef.value?.clearValidate()
  editFormRef.value?.resetFields()
}
// const addForm = () => {
//   if (!modelFormRef.value) {
//     return
//   }
//   modelFormRef.value?.validate( async valid => {
//     if (!valid) {
//       return false
//     }
//     const res = await proxy.$http.
//   })
// }
</script>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}
</style>

<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 0;
}
.myPagination {
  float: right;
  margin: 20px 0 20px 0;
}
</style>
